<template>
	<view class="user-order-card b-box" style="margin-bottom: 20rpx;">
		<!-- 用户  订单  列表卡片 -->
		<view
			class="bg-ff b-box "
			style="border-radius: 16rpx;width: 702rpx;margin: 0 auto;"
		>
			<!--  -->
			<view class="w-100 b-box d-flex flex-r ali-i-c just-s" style="margin-bottom: 32rpx;">
				<!--  -->
				<view class="w-100 b-box d-flex flex-c ali-i-s just-sw">
					<view class="d-flex flex-r ali-i-c just-sw b-box po-re" style="top:-4rpx;width: 100%;">
						<text class="fw-500 pf-sc c-333 fz-32">订单号：{{ staffList.orderno }}</text>
						<view class="d-flex flex-r ali-i-c just-e b-box">
							<text
								v-if="staffList.shopstatus == 0"
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
							>
								待付款
							</text>
							<text
								v-if="staffList.shopstatus == 1"
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
							>
								待发货
							</text>
							<text
								v-if="staffList.shopstatus == 2"
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
							>
								待收货
							</text>
							<text
								v-if="staffList.shopstatus == 3"
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
							>
								已完成
							</text>
							<text
								v-if="staffList.shopstatus == 4"
								class="fw-400 pf-sc"
								style="color: #26387C;font-size: 28rpx;margin-right: 16rpx;"
							>
								已取消
							</text>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="d-flex flex-c b-box w-100" @click.capture.native="GoReadDetails(staffList.id)">
				<view style="min-height: 146rpx;" class=" b-box d-flex flex-r ali-i-c just-s">
					<view
						style="width:140rpx ;height:140rpx;margin-right: 16rpx;border-radius:16rpx;overflow: hidden;"
						class="b-box"
					>
						<image :src="staffList.goods[0].images" style="width:140rpx ;height:140rpx"></image>
					</view>
					<!--  -->
					<view style="width: 490rpx;min-height: 140rpx;" class="b-box d-flex flex-c ali-i-s just-s">
						<view class="d-flex flex-r ali-i-c just-sw b-box" style="margin-bottom: 8rpx;">
							<text class="fw-500 pf-sc c-333 fz-32">{{ staffList.goods[0].goodsname }}</text>
						</view>
						<view
							class="d-flex flex-c ali-i-s just-s b-box"
							style="height: 70rpx;width: inherit;padding-right: 26rpx;"
						>
							<view class="w-100 b-box d-flex flex-r ali-i-c just-sw">
								<text
									class="pf-sc fw-300"
									style="font-size: 22rpx;color: #999999;margin-bottom: 26rpx;"
								>
									{{ staffList.goods[0].ggname }}
								</text>
								<text
									class="pf-sc fw-300"
									style="font-size: 22rpx;color: #999999;margin-bottom: 26rpx;"
								>
									×{{ staffList.goods[0].num }}
								</text>
							</view>
							<view class="b-box d-flex flex-r ali-i-c just-s">
								<text class="pf-sc fw-500 po-re" style="font-size: 22rpx;color: #FF5C00;top:4rpx">
									¥
								</text>
								<text class="pf-sc fw-600" style="font-size: 28rpx;color: #FF5C00;">
									{{ staffList.goods[0].price }}
								</text>
							</view>
						</view>
					</view>
					<!--  -->
				</view>
				<view
					style="height: 106rpx;"
					:style="{ borderBottom: staffList.shopstatus !== 3 ? '2rpx solid #eeeeee' : '0rpx' }"
					class="w-100 b-box d-flex flex-r ali-i-c just-e"
				>
					<view style="width: 392rpx;height: inherit;" class=" d-flex flex-r ali-i-c just-s">
						<text
							style="margin-right: 16rpx;font-size: 28rpx;color: #666666;margin-left: 50rpx;"
							class="pf-sc fw-400 "
						>
							总价：¥{{ staffList.totalmoney }}
						</text>
						<text style="font-size: 28rpx;" class="pf-sc fw-500 c-333">
							实付款：¥{{ staffList.money }}
						</text>
					</view>
				</view>
			</view>
			<!-- btn -->
			<view
				style="height: 98rpx;margin-top: 5rpx;"
				class="b-box d-flex flex-r ali-i-c just-e"
				v-if="staffList.shopstatus !== 3"
			>
				<!-- shopstatus等于0显示的按钮文字 状态为待支付-->
				<view v-if="staffList.shopstatus == 0">
					<view class="b-box d-flex flex-r ali-i-c just-sw" style="width: 366rpx;">
						<u-button
							:throttleTime="700"
							@click="CancelOrder(staffList.id)"
							color="#26387C"
							plain
							:customStyle="{
								height: '68rpx',
								width: '170rpx',
								font: '500 28rpx PingFang SC',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="取消订单"
						></u-button>
						<u-button
							:throttleTime="700"
							@click="PayOrder(staffList.id)"
							:customStyle="{
								height: '68rpx',
								width: '170rpx',
								font: '500 28rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="立即付款"
						></u-button>
					</view>
				</view>

				<!-- shopstatus等于1显示的文字 状态为待发货-->
				<view v-else-if="staffList.shopstatus == 1">
					<view class="b-box d-flex flex-r ali-i-c just-sw" style="width: 190rpx;">
						<u-button
							:throttleTime="700"
							@click="TiXing(staffList.id)"
							:customStyle="{
								height: '68rpx',
								width: '170rpx',
								font: '500 28rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="提醒发货"
						></u-button>
					</view>
				</view>

				<!-- shopstatus等于2显示的文字 待收货-->
				<view v-else-if="staffList.shopstatus == 2">
					<view class="b-box d-flex flex-r ali-i-c just-sw">
						<u-button
							:throttleTime="700"
							@click="ConfirmReceipt"
							:customStyle="{
								height: '68rpx',
								width: '170rpx',
								font: '500 28rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="确认收货"
						></u-button>
					</view>
				</view>
				<!-- @click.capture.native="GoReadDetails(item.id)" -->
				<!-- shopstatus等于3显示的文字 -->
				<view v-else-if="staffList.shopstatus == 3">
					<view class="b-box d-flex flex-r ali-i-c just-sw" style="width: 190rpx;">
					</view>
				</view>

				<view v-else-if="staffList.shopstatus == 4">
					<view class="b-box d-flex flex-r ali-i-c just-sw" style="width: 366rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {doorder} from '@/common/api.js';
export default {
	name: 'user-order-card',

	props: {
		staffList: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			text: ''
		};
	},
	methods: {
		GoReadDetails(id) {
			//跳转到已完成订单详情页
			uni.navigateTo({
				url: `/userModelA/userC/UserOrderDetails/UserOrderDetails?id=${id}`
			});
		},

		PayOrder(id) {
			//支付订单
			this.$emit('PayOrder', this.staffList);
		},
		TiXing(id) {
			//提醒发货
			console.log('提醒发货',id);
			let params={
				token:uni.getStorageSync('usertoken'),
				type:2,
				id:id
			}
			doorder(params).then((res)=>{
				if(res.data.code===1){
					uni.showToast({
						title:'商家已收到提醒'
					})
				}
			})

			this.$emit('TiXing', this.staffList);
		},
		ConfirmReceipt() {
			this.$emit('ConfirmReceipt', this.staffList);
		},
		CancelOrder() {

			this.$emit('CancelOrder', this.staffList);
		},
		Contact(id) {
			//联系客服
			console.log('联系客服',id);
			this.$emit('Contact', this.staffList);
		},
	},
	mounted() {}
};
</script>

<style lang="scss">
.user-order-card {
}
</style>
